<!--
 * @Description: 
 * @Author: yech
 * @Date: 2021-02-16 15:20:01
-->
<template>
    <app-navigator defaultPath="normal/button">
        <article class="app-home">
            <section class="app-header">v3-component</section>
            <section class="app-menu">
                <app-menu />
            </section>
            <section class="app-content">
                <app-navigator-page />
            </section>
        </article>
    </app-navigator>
</template>

<script lang="ts">
import { AppNavigator } from './components/navigator/app-navigator';
import { AppNavigatorPage } from './components/navigator/app-navigator-page';
import AppMenu from './components/app/app-menu.vue';

export default {
    name: 'app',
    components: {
        AppNavigator,
        AppNavigatorPage,
        AppMenu,
    },
};
</script>

<style lang="scss" scoped>
$headSize: 60px;
$menuSize: 300px;
html,
body {
    margin: 0;
    padding: 0;
}

.app-home {
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: $headSize;

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        border-bottom: solid 1px #f2f2f2;
        background-color: white;
        color: #42b983;
        font-style: italic;
        font-weight: bold;;
    }

    .app-menu {
        position: fixed;
        top: $headSize;
        left: 0;
        bottom: 0;
        width:$menuSize;
        border-right: solid 1px #f2f2f2;
        background-color: white;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .app-content {
        min-height: 100vh;
        box-sizing: border-box;
        padding-top: $headSize + 20px;
        padding-left: $menuSize + 20px;
    }
}
</style>